<template>
  <div id="cart">
    <div class="title">
      <div class="t-left">已选商品</div>
      <div class="t-left" @click="clearcartlist">🚽清空</div>
    </div>
    <div class="none" v-show="!this.$store.state.cartlist">
        购物车空空如也！！！
    </div>
    <div class="item" v-for="(item, index) in this.$store.state.cartlist" :key="index">
      <div class="left">
        <img v-bind:src="item.picture" alt="" />
      </div>
      <div class="center">
        <div class="name">{{ item.name }}</div>
        <div class="much">￥{{ item.min_price }}</div>
      </div>
      <div class="right">
        <button class="b1" @click="shopcartsub(item.id)">－</button>
        <div class="num">{{ item.count }}</div>
        <button class="b2" @click="shopcartadd(item.id)">＋</button>
      </div>
    </div>
    <div class="add">
      <div>
        合计：￥{{this.$store.getters.sum}}
        <div class="money"></div>
      </div>
      <button>去结算</button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
        }
    },
    watch:{
    },
    mounted(){
        this.$store.commit("getcartlist", { userid: localStorage.getItem("id") });

    },
    methods:{
      clearcartlist(){
        this.$store.commit("clearcartlist", { userid: localStorage.getItem("id") });
      },
      shopcartadd(id){
        this.$store.commit("shopcartadd", { userid: localStorage.getItem("id") ,goodid:id});
      },
      shopcartsub(id){
        this.$store.commit("shopcartsub", { userid: localStorage.getItem("id") ,goodid:id});
      },
    }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background-color: #ccc;
  position: relative;
}

#cart {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: white;
  padding: 0 15px;
  max-height: 400px;
}

#cart .title {
  line-height: 50px;
  display: flex;
  padding-right: 25px;
  justify-content: space-between;
}

#cart .title .t-left {
  font-size: 18px;
  font-weight: 700;
}

#cart .none{
    margin: 20px 0  90px 0;
    text-align: center;
    color: red;
}

#cart .item {
    margin: 5px 0 60px 0;
  border-radius: 10px;
  display: flex;
  position: relative;
}
#cart .item .left{
    width: 80px;
}
#cart .item .left img{
    width: 100%;
}

#cart .item .center {
  height: 100%;
  margin-left: 10px;
}

#cart .item .center .name {
  font-size: 14px;
  font-weight: 700;
}

#cart .item .center .much {
  font-size: 14px;
  margin-top: 25px;
  color: red;
}

#cart .item .right {
  float: right;
  display: flex;
  position: absolute;
  right: 30px;
  bottom: 0;
}

#cart .item .right button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

#cart .item .right .num {
  margin: 0 10px;
}

#cart .item .right button.b1 {
  color: skyblue;
  border: 1px solid skyblue;
  background-color: white;
}

#cart .item .right button.b2 {
  color: white;
  border: none;
  background-color: skyblue;
}

#cart .add {
  width: 100%;
  line-height: 50px;
  color: white;
  position: absolute;
  bottom: 0;
  background-color: rgba(128, 128, 128, 0.921);
  display: flex;
  justify-content: space-around;
}
#cart .add button {
  width: 80px;
  height: 35px;
  line-height: 35px;
  background-color: rgb(127, 204, 10);
  border: none;
  color: white;
  margin-top: 5px;
  border-radius: 5px;
}
</style>